<template>
  <div class="login-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
      <h2 class="login-title">6人微视频</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" placeholder="邮箱或手机号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="form.resource">
          <el-radio label="普通会员" value="admir"></el-radio>
          <el-radio label="管理员" value="person"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="button">
        <el-button type="primary" @click="submitForm('form','form.resource')">登录</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { loginA, loginU} from "@/api/login";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        resource: "普通会员",
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName, user) {
      this.$refs[formName].validate(valid => {
        console.log("1111111");
        if (valid) {
          console.log("22222");
          console.log(user);
          console.log(formName);
          if (this.form.resource === "普通会员") {
            loginU(this.form.username, this.form.password).then(response => {
              const resp = response.data;
              if (resp.flag) {
                this.$router.push({ path: "/home" });
              } else {
                //未通过，弹出警告
                // alert(resp.message)
                this.$message({
                  message: resp.message,
                  type: "warning"
                });
              }
            });
          }else{
             loginA(this.form.username, this.form.password).then(response => {
              const resp = response.data;
              if (resp.flag) {
                this.$router.push({ path: "/manager" });
              } else {
                //未通过，弹出警告
                // alert(resp.message)
                this.$message({
                  message: resp.message,
                  type: "warning"
                });
              }
            });
          }
          //提交表单至后台进行验证
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
.login-title {
  text-align: center;
  color: #301333;
  padding: 40px;
}
.login-container {
  position: absolute;
  width: 100%;
  height: 800px;
  background: url("../../assets/login.jpg") no-repeat center center;
  /* background-attachment: fixed; */
  background-size: over;
}
.login-form {
  position: relative;
  width: 26%;
  margin: 10% 66%;
  background-color: rgb(255, 255, 255, 0.8);
  padding: 0px 30px 30px 0px;
  border-radius: 20px;
}
/* .login-form{
  line-height: 4%;
} */
.button :nth-child(n) {
  margin: 0 10px;
}
</style>